<template>
  <div
    class="videoMsg"
    v-loading="saveUploading.status"
    :element-loading-text="saveUploading.txt"
    v-loading.fullscreen.lock="saveUploading.full"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div class="uploader-box clear">
        <div class="uploader-inner video-uploader fl">
          <el-form-item label="选择视频" prop="path">
            <uploader
              class="uploader-example uploader-video"
              :options="uploadOptionsVideo"
              :autoStart="true"
              ref="uploaderVideo"
              :file-status-text="statusText"
              @files-submitted="fileSubmitVideo"
              @file-removed="fileRemovedVideo"
              @file-success="fileSuccessVideo"
              @file-error="fileFailVideo"
            >
              <uploader-unsupport></uploader-unsupport>
              <uploader-btn
                class="video-format-ifno"
                :directory="false"
                v-if="selectFileShowVideo"
                :attrs="attrsVideo"
                :single="true"
              >
                <i class="el-icon-video-camera"></i>
                <span style="font-size: 12px" v-if="ruleForm.path == ''"
                  >（支持FLV 、MOV、MKV、TS、MP4、AVI、MPG、WMV等格式）</span
                >
              </uploader-btn>
              <uploader-list></uploader-list>
              <div class="uploader-close-box" v-show="ruleForm.path !== ''">
                <img
                  class="thumbnail-picture"
                  :src="BASE_URL + ruleForm.thumbnail_picture"
                  alt="预览图"
                />
                <label
                  class="el-upload-list__item-status-label"
                  @click="videoRemove"
                >
                  <transition name="el-fade-in-linear">
                    <i class="el-icon-upload-success el-icon-check"></i>
                  </transition>
                  <transition name="el-fade-in-linear">
                    <i class="el-icon-close"></i>
                  </transition>
                </label>
              </div>
            </uploader>
          </el-form-item>
        </div>
        <div class="uploader-inner cover-uploader fr">
          <el-form-item label="封面图片">
            <uploader
              class="uploader-example"
              :options="uploadOptionsImg"
              :autoStart="false"
              ref="uploaderImg"
              :file-status-text="statusText"
              @file-added="fileAddImg"
              @file-removed="fileRemovedImg"
              @file-success="fileSuccessImg"
              @file-error="fileFailImg"
            >
              <uploader-unsupport></uploader-unsupport>
              <uploader-btn
                class="format-ifno"
                :directory="false"
                :attrs="attrsImg"
                v-if="selectFileShowImg"
                :single="true"
              >
                <i class="el-icon-upload"></i>
                <span style="font-size: 12px">（支持JPG/PNG/JPEG等格式）</span>
              </uploader-btn>
              <uploader-list></uploader-list>
              <div class="uploader-close-box" v-show="ruleForm.picture !== ''">
                <img
                  v-if="ruleForm.picture !== ''"
                  :src="BASE_URL + ruleForm.picture"
                  class="avatar"
                />
                <label
                  class="el-upload-list__item-status-label"
                  @click="pictureRemove"
                >
                  <transition name="el-fade-in-linear">
                    <i class="el-icon-upload-success el-icon-check"></i>
                  </transition>
                  <transition name="el-fade-in-linear">
                    <i class="el-icon-close"></i>
                  </transition>
                </label>
              </div>
            </uploader>
          </el-form-item>
        </div>
      </div>
      <el-form-item label="视频名称" prop="name">
        <el-input
          v-model.trim="ruleForm.name"
          :maxlength="parseInt(50)"
          placeholder="请输入视频名称"
        ></el-input>
      </el-form-item>
      <ul v-if="!$store.state.platformInformation">
        <li class="publishFrom_seleck">
          <el-form-item label="授课老师" prop="create_id">
            <el-select
              v-model="ruleForm.create_id"
              @change="getUserClass"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in teacherData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="视频信息" prop="type">
            <el-select v-model="ruleForm.type" filterable placeholder="请选择">
              <el-option label="公开课" value="0"></el-option>
            </el-select>
          </el-form-item>
        </li>
        <!--  -->
        <li class="publishFrom_seleck">
          <el-form-item label="学段" prop="study_section_id">
            <el-select
              v-model="ruleForm.study_section_id"
              filterable
              @change="relateChange($event, 'study_section')"
              placeholder="请选择"
            >
              <el-option
                v-for="item in orgLevel2"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年级" prop="grade_id">
            <el-select
              v-model="ruleForm.grade_id"
              filterable
              @change="relateChange($event, 'grade')"
              placeholder="请选择"
            >
              <el-option
                v-for="item in orgLevel3"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </li>
        <!--  -->
        <li class="publishFrom_seleck">
          <el-form-item label="科目" prop="subject_id">
            <el-select
              v-model="ruleForm.subject_id"
              filterable
              @change="relateChange($event, 'subject')"
              placeholder="请选择"
            >
              <el-option
                v-for="item in orgSubject"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="版本">
            <el-select
              v-model="ruleForm.version_id"
              filterable
              @change="relateChange($event, 'version')"
              placeholder="请选择"
            >
              <el-option
                v-for="item in orgVersion"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </li>
        <!--  -->
        <li class="publishFrom_seleck">
          <el-form-item label="教材" prop="material_id">
            <el-select
              v-model="ruleForm.material_id"
              filterable
              @change="relateChange($event, 'material')"
              placeholder="请选择"
            >
              <el-option
                v-for="item in orgMaterial"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="章" prop="list_1_id">
            <el-select
              v-model="ruleForm.list_1_id"
              filterable
              @change="relateChange($event, 'list_1')"
              placeholder="请选择"
            >
              <el-option
                v-for="item in orgList1"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </li>
        <!--  -->
        <li class="publishFrom_seleck">
          <el-form-item label="节" prop="list_2_id">
            <el-select
              v-model="ruleForm.list_2_id"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in orgList2"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </li>
      </ul>
      <!-- 视频分类------ -->
      <el-form-item label="视频分类" v-if="$store.state.checkLevel" prop="name">
        <el-select
          style="width: 220px"
          v-model="ruleForm.cate_id"
          @change="getVal"
          placeholder="请选择"
        >
          <el-option
            v-for="item in dataItem"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-button type="text" @click="addKindTigger()">添加分类</el-button>
      </el-form-item>
      <!-- 视频分类------ -->
      <el-form-item label="关键字" prop="keyword" class="keywordBox">
        <el-tag
          :key="inx"
          v-for="(tag, inx) in ruleForm.keyword"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
        >
          {{ tag }}
        </el-tag>
        <el-input
          class="keyword"
          maxlength="6"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          placeholder="6个字符"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        >
        </el-input>
        <el-button
          v-show="ruleForm.keyword.length < 5"
          class="button-new-tag"
          size="small"
          @click="showInput"
          >+</el-button
        >
      </el-form-item>
      <el-form-item label="视频简介" prop="profile">
        <el-input
          type="textarea"
          :rows="5"
          resize="none"
          maxlength="200"
          v-model="ruleForm.profile"
          placeholder="请输入视频简介,不超200字"
        ></el-input>
        <span class="numberWord"
          ><i>{{ ruleForm.profile.length }}</i
          >/200</span
        >
      </el-form-item>
      <el-form-item label="课程须知" prop="notice">
        <el-input
          type="textarea"
          v-model="ruleForm.notice"
          :rows="5"
          resize="none"
          maxlength="200"
          placeholder="课程须知,不超200字"
        ></el-input>
        <span class="numberWord"
          ><i>{{ ruleForm.notice.length }}</i
          >/200</span
        >
      </el-form-item>
      <template v-if="!$store.state.checkLevel">
          <el-form-item
            label="是否停顿"
            prop="stop_time"
          >
            <p style="margin-top: 0">(自动暂停后需要学生手动点击播放）</p>
            <el-radio-group v-model="pauseVal" @change="getValpase">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
            <span class="pauseVal" style="margin-left: 15px">
              <el-input-number
                v-model="ruleForm.stop_time"
                :precision="0"
                :min="0"
                :max="100"
                :disabled="isTrue"
              >
              </el-input-number>
              分钟暂停一次
            </span>
          </el-form-item>
          <el-form-item label="上课班级">
            <el-checkbox-group v-model="ruleForm.class" @change="getClassId">
              <el-checkbox
                v-for="item in userClass"
                :label="item.id"
                :value="item.id"
                :key="item.rename"
              >
                {{ item.rename }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <!-- <el-form-item label="观看权限">
              <el-button type="primary" @click="changeAuthority">设置</el-button>
              <div class="allDataBox" v-show="(cNode.length > 0 || selectRole.length > 0 || selectUser.length > 0)">
                <span v-if="limitType == 2">谁可以看</span>
                <span v-else-if="limitType == 3">谁不能看</span>
                <span v-else></span>
                <div class="chaiBox">
                    <el-tag
                      v-for="tag in cNode"
                      :key="JSON.stringify(tag)"
                      closable
                      @close="closeClass(tag)"
                      type="info">
                      {{tag.rename}}
                    </el-tag>
                    <el-tag
                      v-for="tag in selectRole"
                      :key="JSON.stringify(tag)"
                      closable
                      @close="closeRole(tag)"
                      type="info">
                      {{tag.name}}
                    </el-tag>
                    <el-tag
                      v-for="tag in selectUser"
                      :key="JSON.stringify(tag)"
                      closable
                      @close="closeUser(tag)"
                      type="info">
                      {{tag.name}}
                    </el-tag>
                </div>
              </div>
          </el-form-item> -->
          <el-form-item
            label="学分"
            prop="study_score"
          >
            <el-radio-group v-model="ruleForm.study_score">
              <el-radio :label="0">无</el-radio>
              <el-radio :label="1">1分</el-radio>
              <el-radio :label="2">2分</el-radio>
              <el-radio :label="3">3分</el-radio>
            </el-radio-group>
            <span class="pauseVal" style="margin-left: 15px">
              <el-input-number
                v-model="creditVal"
                :precision="0"
                :min="0"
                :max="10"
                :disabled="isTrue2"
              >
              </el-input-number
              >学分
            </span>
          </el-form-item>
          <el-form-item label="加精" prop="is_nice">
            <el-radio-group v-model="ruleForm.is_nice">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
      </template>

      <el-form-item label="允许下载" prop="is_download">
        <el-radio-group v-model="ruleForm.is_download">
          <el-radio label="1">是</el-radio>
          <el-radio label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <div
        class="information clear"
        v-if="!$store.state.checkLevel && compParam.editStatus"
      >
        <div class="information_l fl">
          <span>
            <i class="ipm but_Collection02_down"></i>
            <p>{{ otherInfo.favorite_num }}收藏</p>
          </span>
          <span>
            <i class="ipm but_Collection02_down"></i>
            <p>{{ otherInfo.play_num }}播放</p>
          </span>
          <span>
            <i class="ipm but_Collection02_down"></i>
            <p>{{ otherInfo.comment_num }}评论</p>
          </span>
        </div>
        <div class="information_r fr">
          <p>
            视频得分<strong>{{ otherInfo.score }}</strong>
          </p>
          <p>上传于 {{ otherInfo.upload_time }}</p>
        </div>
      </div>
      <el-form-item>
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确定</el-button
        >
      </el-form-item>
    </el-form>

    <el-dialog
      title="图片设置"
      :visible.sync="cropperViews"
      width="1000px"
      custom-class="croppering"
      :before-close="clearFilet"
      :close-on-click-modal="false"
    >
      <div class="croppering">
        <div class="cropper">
          <vueCropper
            ref="cropper"
            :img="imgOption.img"
            :outputSize="imgOption.size"
            :outputType="imgOption.outputType"
            :info="true"
            :full="imgOption.full"
            :canMove="imgOption.canMove"
            :canMoveBox="imgOption.canMoveBox"
            :fixedBox="imgOption.fixedBox"
            :original="imgOption.original"
            :autoCrop="imgOption.autoCrop"
            :autoCropWidth="imgOption.autoCropWidth"
            :autoCropHeight="imgOption.autoCropHeight"
            :centerBox="imgOption.centerBox"
            :high="imgOption.high"
            :infoTrue="imgOption.infoTrue"
            :enlarge="imgOption.enlarge"
          >
          </vueCropper>
        </div>
        <div slot="footer" class="dialog-footer cropper_btn">
          <el-button @click="clearFilet()">取消</el-button>
          <el-button type="primary" @click="finish('base64')">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 添加分类----------------------------------------------------- -->
    <el-dialog
      title="视频分类"
      :visible.sync="addKindFlag"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="handleClosed()"
      width="30%"
    >
      <p>
        添加分类：
        <el-input
          type="text"
          style="width: 60%"
          @keyup.enter.native="addCategory"
          placeholder="输入视频分类，不超过8个字"
          v-model.trim="addKindForm.value"
          maxlength="8"
        >
        </el-input>
        <el-button type="primary" @click="addCategory()">添加</el-button>
      </p>
      <p style="padding-bottom: 30px">
        分类管理：<br />
        <el-tag
          size="mini"
          v-for="item in dataItem"
          :key="item.id"
          style="margin-top: 5px; margin-right: 3px"
          @close.stop="delClose(item)"
          closable
          >{{ item.name }}</el-tag
        >
      </p>
    </el-dialog>
    <!-- 添加分类-------------------------------------------------------------------- -->

    <el-dialog
      title="观看权限"
      :visible.sync="authorityFlag"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="35%"
      :show-close="false"
    >
      <el-radio-group v-model="limitType" @change="getLimitType">
        <el-radio :label="1">不限制</el-radio>
        <el-radio :label="2">谁可以看</el-radio>
        <el-radio :label="3">谁不能看</el-radio>
      </el-radio-group>
      <div v-if="limitType === 2 || limitType === 3" class="contentBox">
        <div class="leftBox">
          <h4>选择</h4>
          <template>
            <el-tabs :tab-position="tabPosition" style="height: 90%;border: 1px solid #EBEEF5;">
              <el-tab-pane label="按班级分" style="height: 315px; overflow: auto;">
                <el-tree
                  :data="classData"
                  :props="defaultProps"
                  show-checkbox
                  @check="getClassArr"
                  ref="tree"
                  node-key="id"
                  default-expand-all
                  :expand-on-click-node="false">
                </el-tree>
              </el-tab-pane>
              <el-tab-pane label="按角色分">
                <el-checkbox-group v-model="selectRole">
                    <el-checkbox style="display: block;" v-for="item in roleData" :key="item.id" :label="item">{{item.name}}</el-checkbox>
                </el-checkbox-group>
              </el-tab-pane>
              <el-tab-pane label="选择用户">
                <el-input type="text" style="margin-bottom: 5px; width:260px;" placeholder="请输入用户名" v-model.trim="username" clearable @clear="username=''">
                </el-input>
                <el-checkbox-group v-model="selectUser" style="height: 260px; overflow: auto;">
                    <el-checkbox style="display: block;" v-for="item in userData" :key="item.id" :ref="item.id" :label="item" v-show="username == '' ? true : item.name.includes(username)">
                      <div style="display:flex;justify-content: space-between;">
                        <div style="
                          width: 170px;
                          word-break: keep-all;
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        ">
                          {{item.name}} / {{item.number}}
                        </div>
                        <div style="
                          width: 70px;
                          word-break: keep-all;
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          padding-left:10px
                        ">
                          {{item.role_name}}
                        </div>
                      </div>
                    </el-checkbox>
                </el-checkbox-group>
              </el-tab-pane>
            </el-tabs>
          </template>
        </div>
        <div class="rightBox">
          <h4>已选</h4>
          <ul class="tagBox">
            <li>
              <el-tag
                v-for="tag in cNode"
                :key="JSON.stringify(tag)"
                closable
                @close="closeClass(tag)"
                type="info">
                {{tag.rename}}
              </el-tag>
            </li>
            <li>
              <el-tag
                v-for="tag in selectRole"
                :key="JSON.stringify(tag)"
                closable
                @close="closeRole(tag)"
                type="info">
                {{tag.name}}
              </el-tag>
            </li>
            <li>
              <el-tag
                v-for="tag in selectUser"
                :key="JSON.stringify(tag)"
                closable
                @close="closeUser(tag)"
                type="info">
                {{tag.name}}
              </el-tag>
            </li>
          </ul>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="selectOut()" type="primary" plain>取消</el-button>
        <el-button type="primary" @click="selectAllin()">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { VueCropper } from "vue-cropper";
import { dataURLtoFile, uploaderFileFail } from "./../../../../tools/tool";

export default {
  props: ["compParam", "activeIndex"],
  name: "",
  components: {
    VueCropper,
  },
  data() {
    return {
      cNode: [],
      cNodeste: [],
      username: '', // 用户名
      defaultProps: {
        children: 'children',
        label: 'name',
        disabled:'disabled'
      },
      classData: [], // 班级数据
      roleData: [], // 角色数据
      userData: [], // 用户数据
      selectRole: [], // 选中的角色
      selectUser: [], //选中的用户
      tabPosition: '按班级分',
      limitType: 1, // 观看权限 --- 1不限制、2允许、3禁止
      authorityFlag: false, // --- 控制权限弹框
      app_code: sessionStorage.getItem("CheckSchoolAppCode"),
      save_id: "",
      addKindFlag: false, //添加分类弹窗状态
      dataItem: [], // 装视频分类的数据
      addKindForm: {
        // 添加视频分类
        value: "",
      },
      uploaderStatus: "noFile", // 记录上传文件的状态 noFile：没有上传文件，fail：上传失败，success：上传成功，loading：正在上传
      diskState: false,
      cropperViews: false, // 是否显示图片裁剪的模态框
      imgOption: {
        // vue-cropper 参数配置
        img: "", // 裁剪图片的地址
        size: 1, // 裁剪生成图片的质量
        full: false, // 是否输出原图比例的截图
        outputType: "png", //输出图片格式
        canMove: true, //能否拖动图片
        fixedBox: true, //截图框固定大小
        original: false, //否显示原始宽高
        canMoveBox: true, //能否拖动截图框
        autoCrop: true, //autoCrop 是否自动生成截图框
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 290,
        autoCropHeight: 140,
        centerBox: false, //截图框是否限制在图片里
        high: true, //是否根据dpr生成适合屏幕的高清图片
      },
      previewImgUrl: "",
      thisIndex: "1",
      uploadLimitMax: 0,
      isActive: false,
      uploadStatus: {
        video: false,
        img: false,
      },
      saveUploading: {
        status: false,
        txt: "正在保存...",
        full: false,
      },
      selectFileShowVideo: true, //是否显示选择文件按钮
      selectFileShowImg: true, //是否显示选择文件按钮
      uploadOptionsVideo: {
        target: this.BASE_URL + "/api/video/video_upload",
        query: {CheckSchoolAppCode: sessionStorage.getItem("CheckSchoolAppCode")},
        testChunks: false,
        headers: {
          Authorization: `Bearer ` + this.$g.access_token,
          DecisionPlatform: this.$g.decisionPlatform,
          token: sessionStorage.getItem("token"),
        },
      },
      uploadOptionsImg: {
        target: this.BASE_URL + "/api/video/thumbnail_upload",
        testChunks: false,
        headers: {
          Authorization: `Bearer ` + this.$g.access_token,
        },
      },
      selectFileOrNotVideo: false, //是否选中文件
      selectFileOrNotImg: false, //是否选中文件
      // uploadOrNot: false, //是否已经上传
      attrsVideo: {
        accept: [],
      },
      attrsImg: {
        accept: ["image/*"],
      },
      imageType: ["image/jpeg", "image/bmp", "image/png"], // 上传图片格式
      statusText: {
        success: "上传成功",
        error: "上传出错",
        uploading: "正在上传...",
        paused: "暂停",
        waiting: "等待上传...",
      },
      uploadInfo: {
        file_name: "",
        file_path: "",
        file_size: 0,
      },
      teacherData: [],
      teacherParam: {
        org_id: 0,
        role_id: 6,
        status: [1],
      },
      orgLevel2: [],
      orgLevel3: [],
      orgSubject: [],
      orgVersion: [],
      orgMaterial: [],
      orgList1: [],
      orgList2: [],
      orgLevel2Param: {
        //获取学段参数
        level: 2,
        pid: null,
        direction: "balance",
      },
      orgLevel3Param: {
        //获取年纪参数
        level: 3,
        pid: null,
        direction: "balance",
      },
      subjectParam: {
        //获取科目,版本，参数
        type: 2,
        org_id: null,
        status: 1,
      },
      versionParam: {
        //获取科目,版本，参数
        type: 2,
        org_id: null,
        sub_id: null,
        status: 1,
      },
      materialParam: {
        //获取科目,版本，参数
        org_id: null,
        sub_id: null,
        ver_id: null,
        status: 1,
      },
      listParam1: {
        pid: 0,
        material_id: null,
        level: 1,
      },
      listParam2: {
        pid: 0,
        material_id: null,
        level: 2,
      },
      userClass: [],
      inputVisible: false,
      inputValue: "",
      isTrue2: false,
      pauseVal: 0, //是否停顿
      isTrue: true,
      creditVal: "",
      ruleForm: {

        limit_type: 1, // 观看权限 --- 1不限制、2允许、3禁止
        limit_org_id: '', // 班级
        limit_role_id: '', // 角色
        limit_user_id: '', // 用户

        stop_time: 0,
        class: [],
        cate_id: 0,
        name: "", //视频名称
        type: "", //视频信息
        create_id: "",
        study_section_id: null, //学段
        grade_id: null, //年级
        subject_id: null, //科目
        version_id: null, // 版本
        material_id: null, //教材
        list_1_id: null, //章
        list_2_id: null, //节
        keyword: [], //关键字
        profile: "", //视频简介
        notice: "", //课程须知
        study_score: 0, //学分-自定义
        is_download: "1",
        is_nice: "0",
        picture: "",
        path: "",
        authority: 1,
        thumbnail_picture: "", // 上传视频后获取视频的第一帧作为图片
      },
      otherInfo: {
        user_name: this.$store.getters.userInfo.name,
        score: 0,
        favorite_num: 0,
        play_num: 0,
        comment_num: 0,
        upload_time: "",
      },
      rules: {
        path: [{ required: true, message: "请选择视频", trigger: "change" }],
        name: [
          { required: true, message: "请输入视频名称", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],
        type: [
          { required: true, message: "请选择视频信息", trigger: "change" },
        ],
        create_id: [
          { required: true, message: "请选择授课老师", trigger: "change" },
        ],
        study_section_id: [
          { required: true, message: "请选择学段", trigger: "change" },
        ],
        grade_id: [
          { required: true, message: "请选择年级", trigger: "change" },
        ],
        subject_id: [
          { required: true, message: "请选择科目	", trigger: "change" },
        ],
        version_id: [
          { required: false, message: "请选择版本", trigger: "change" },
        ],
        material_id: [
          { required: false, message: "请选择教材", trigger: "change" },
        ],
        list_1_id: [
          { required: false, message: "请选择章", trigger: "change" },
        ],
        list_2_id: [
          { required: false, message: "请选择节", trigger: "change" },
        ],
        profile: [
          {
            min: 0,
            max: 200,
            message: "长度在 0 到 200 个字符",
            trigger: "change",
          },
        ],
        notice: [
          {
            min: 0,
            max: 200,
            message: "长度在 0 到 200 个字符",
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    this.initFunc();

    this.getClassData();
    this.getRoleData();
    this.getUserData();

    this.findCategory();
    if (this.compParam.editStatus) {
      this.getDisk();
    }
  },
  beforeDestroy() {
    // 容错处理，避免上传页面离开是还继续上传文件暂用资源
    this.$refs.uploaderVideo.uploader.cancel();
  },
  watch: {
    activeIndex: {
      handler(n) {
        if (n === this.thisIndex) {
          this.initFunc();
        }
      },
    },
    "uploadStatus.video": {
      handler(newVal, oldVal) {
        if (newVal && this.uploadStatus.img) {
          this.isActive = false;
          this.saveVideo();
        }
      },
    },
    "uploadStatus.img": {
      handler(newVal, oldVal) {
        if (newVal && this.uploadStatus.video) {
          this.isActive = false;
          this.saveVideo();
        }
      },
    },
    creditVal(a, b) {
      if (a) {
        this.ruleForm.study_score = "";
      } else {
        this.creditVal = 0;
      }
    },
    "ruleForm.study_score"(a, b) {
      if (a) {
        this.creditVal = 0;
      } else {
        this.ruleForm.study_score = this.ruleForm.study_score;
      }
    }
  },
  methods: {
    getCheckVideo(videoid) {
      // console.log(videoid, '0000')
      let params ={
        type: 1,
        type_id: videoid,
      }
      let success = res =>{
        // console.log(res,6666666666)
        this.limitType = res.data.limit_type

        this.cNode = res.data.org_name || []
        this.selectRole = res.data.role_name || []
        this.selectUser = res.data.user_name || []

      }
      this.$ajax.get('api/video/get_check_by_video_id', {params, func: {success}})
    },
    getLimitType(val) {
      // if(!Boolean(this.compParam.id)) {
        for (var i of this.cNode) {
          this.$refs.tree && this.$refs.tree.setChecked(i.id, false);
        }
        this.cNode = []
        this.selectRole = []
        this.selectUser = []
      // }
    },
    changeAuthority() { // 观看权限选择
        this.authorityFlag = true

        this.$nextTick(() => {
          //由于label绑定的是item对象，所以需要做这一层处理
          //org
          for (var i of this.cNode) {
            this.$refs.tree.setChecked(i.id, true);
          }
          //role
          // console.log(this.selectRole, 4444444);
          let s = [];
          for (var j of this.selectRole) {
            for (var m of this.roleData) {
              if (j.id === m.id) {
                s.push(m);
              }
            }
          }
          this.selectRole = s;

          let u = [];
          for (var j of this.selectUser) {
            for (var m of this.userData) {
              if (j.id === m.id) {
                u.push(m);
              }
            }
          }
          this.selectUser = u;
        });
    },
    /** 获取班级 */
    getClassData() {
      let success = res => {
        console.log(res, 'gggggg')
        for (var i of res.data) {
          if(!i.children) {
            i.disabled = true
            continue
          }
          for(var j of i.children) {
            if(!j.children) {
              j.disabled = true
              continue
            }
          }
        }
        // console.log(res.data,'pppp')
        let num = 0
        for(var k of res.data) {
          for (var n of k.children) {
            if(n.disabled) {
              num++
            }
          }
          if(num == k.children.length) {
            k.disabled = true
          }
          num = 0
        }
        this.classData = res.data  
      }
      this.$ajax.get('/api/newlevel/platform_org', {params: {level: 2, direction: 'down'},func: {success}})
    },
    getClassArr() { // 获取 过滤出被选中的班级，
      this.cNodeste = this.$refs.tree.getCheckedNodes();
      this.cNode = this.cNodeste.filter(i => i.rename)
    },
    closeClass(val) { // 删除班级tag选项
      // console.log(val)
      this.cNode = this.cNode.filter(i => i.id !== val.id) // 去右
      this.$refs.tree.setChecked(val.id,false) // 去左
    },
    
    /** 获取角色 */
    getRoleData() {
      let success = res => {
        this.roleData = res.data
        // this.roleData = res.data.filter(item => item.id > 3)
      }
      this.$ajax.get('api/role/get_all_role', {params: {type: 1},func: {success}})
    },
    closeRole(val) { // 删除角色tag选项
        // console.log(val)
        this.selectRole = this.selectRole.filter(item => item.id !== val.id)
    },

    /** 获取用户 */
    getUserData() {
      let success = res => {
          // this.userData = deep_clone(res.data)
          this.userData = res.data.filter(item => item.role_base != 2 && item.role_base != 3)
      }
      this.$ajax.get('api/user/user', {func: {success}})
    },
    closeUser(val) {
      this.selectUser = this.selectUser.filter(item => item.id !== val.id)
    },
    selectAllin() { // 获取全部数据
      if(this.limitType == 1) {
        for (var i of this.cNode) {
          this.$refs.tree && this.$refs.tree.setChecked(i.id, false);
        }
        this.cNode = []
        this.selectRole = []
        this.selectUser = []
      }
      this.authorityFlag = false
    },
    selectOut() {
      if(!Boolean(this.compParam.id)) {
          this.cNode.forEach(item =>{
            this.$refs.tree.setChecked(item.id,false)
          })
          this.cNode = []
          this.selectRole = []
          this.selectUser = []
      }else{
        this.getCheckVideo(this.compParam.id)
      }
      this.authorityFlag = false
    },

    getValpase(val) { // 是否停顿，是可输入多少分钟停一次，否禁止输入操作
      if(val > 0) {
        this.isTrue = false
      }else{
        this.isTrue = true
      }
    },
    // ---------------------------------------------------------新添加
    addKindTigger() {
      //控制添加分类弹窗
      this.addKindFlag = true;
    },
    findCategory() {
      // 获取视频分类
      const success = (res) => {
        this.dataItem = res.data;
        this.dataItem.unshift({ id: 0, name: "全部" });
      };
      this.$ajax.get("api/video/video_cate", { func: { success: success } });
    },
    handleClosed() {
      this.addKindForm.value = "";
    },
    addCategory() {
      // 添加视频分类
      if (this.addKindForm.value == "") {
        this.$message.error("内容不能为空");
        return;
      }
      let params = {
        name: this.addKindForm.value,
      };
      const success = (res) => {
        this.$message.success(res.msg);
        this.addKindForm.value = "";
        // this.initFunc(); // 未知功能
        this.findCategory();
      };
      const fail = (res) => {
        this.$message.error(res.msg);
      };
      this.$ajax.post("api/video/video_cate", params, {
        func: { success: success, fail: fail },
      });
    },

    delClose(item) {
      // 删除视频分类
      let params = {
        id: item.id,
      };
      this.dataItem.splice(this.dataItem.indexOf(item), 1);
      let success = (res) => {
        this.$message.success(res.msg);
      };
      this.$ajax.delete("api/video/video_cate", { params, func: { success } });
    },
    // ---------------------------------------------------------新添加
    getVal(val) {
      // 获取当前选中项
      this.ruleForm.cate_id = val; // 把获取到的分类id 给 添加视频的视频分类id字段
    },
    /**
     * 获取系统存储容量
     */
    getDisk() {
      let success = (res) => {
        if (res.data[17] === 0) {
          this.diskState = false;
        } else {
          this.diskState = true;
        }
      };

      this.$ajax.get("api/system/system_info", { func: { success: success } });
    },
    /**
     *获取班级
     */
    getUserClass() {
      let success = (res) => {
        this.userClass = [];
        this.userClass = deep_clone(res.data);
      };
      this.$ajax({
        url: "api/org/class_userid",
        method: "get",
        params: {
          user_id: this.ruleForm.create_id,
          style: 1,
          data_type: 0,
        },
        func: { success: success },
      });
    },
    getClassId(val) {
      // console.log(val, 123456);
    },
    initFunc() {
      if (this.compParam.editStatus) {
        this.getVideoInfo();
      }
      this.getOrgLevel2();
      this.getVideoUpLimit();
      this.getTeacher();
    },
    getVideoInfo() {
      this.saveUploading.status = true;
      this.saveUploading.full = true;

      let success = (data) => {
        var result = data.data;
        console.log(result, 888889);

        this.ruleForm.id = result.id;
        this.getCheckVideo(result.id); 

        this.ruleForm.name = result.name;
        this.ruleForm.cate_id = result.cate_id;
        this.ruleForm.type = result.type.toString();

        if (this.$store.state.platformInformation) {
          this.ruleForm.create_id = this.$store.getters.userInfo.id;
        } else {
          this.ruleForm.create_id = result.create_id;
        }

        this.ruleForm.study_section_id = result.study_section_id;
        this.ruleForm.grade_id = result.grade_id;
        this.ruleForm.subject_id = parseInt(result.subject_id) === 0 ? null : result.subject_id;
        this.ruleForm.version_id = parseInt(result.version_id) === 0 ? null : result.version_id;
        this.ruleForm.material_id = parseInt(result.material_id) === 0 ? null : result.material_id;
        this.ruleForm.list_1_id = parseInt(result.list_1_id) === 0 ? null : result.list_1_id;
        this.ruleForm.list_2_id = parseInt(result.list_2_id) === 0 ? null : result.list_2_id;
        this.ruleForm.keyword = is_empty(result.keywords) ? [] : result.keywords;
        this.ruleForm.profile = result.profile;
        this.ruleForm.notice = result.notice;
        this.ruleForm.is_nice = result.is_nice.toString();
        this.ruleForm.is_download = result.is_download.toString();
        this.ruleForm.notice = result.notice;
        this.ruleForm.path = result.path;
        this.uploaderStatus = "success";
        this.ruleForm.picture = result.picture;
        this.ruleForm.authority = result.authority;
        // console.log(result.study_class.split(","));

        this.ruleForm.class = result.study_class.split(",");

        this.previewImgUrl = result.source_url + result.picture;
        this.compParam.name = result.name;
        this.compParam.path = result.path;
        this.compParam.play_url = result.pc_play_url;
        this.compParam.integratingUrl = this.BASE_URL + "/" + result.path;
        this.compParam.thumbnail = result.picture_url;
        this.compParam.length = result.length;
        this.ruleForm.thumbnail_picture = result.thumbnail_picture;
        this.getUserClass();

        if (parseInt(result.study_score) > 3) {
          this.creditVal = result.study_score;
          this.ruleForm.study_score = "";
        } else {
          this.ruleForm.study_score = result.study_score;
        }

        // --------------------------------- 是否停顿 大于0停顿
        this.ruleForm.stop_time = result.stop_time;
        if(this.ruleForm.stop_time > 0) {
          this.pauseVal = 1
          this.isTrue = false
        }
        // ---------------------------------

        this.orgLevel3Param.pid = result.study_section_id;
        this.getOrgLevel3();

        this.subjectParam.org_id = result.grade_id;
        this.getSubject();

        if (parseInt(result.subject_id) > 0) {
          this.versionParam.org_id = result.grade_id;
          this.versionParam.sub_id = result.subject_id;
          this.getVersion();
        }

        if (parseInt(result.version_id) > 0) {
          this.materialParam.org_id = result.grade_id;
          this.materialParam.sub_id = result.subject_id;
          this.materialParam.ver_id = result.version_id;
          this.getMaterial();
        }

        if (parseInt(result.material_id) > 0) {
          this.listParam1.material_id = result.material_id;
          this.getList1();

          if (parseInt(result.list_1_id) > 0) {
            this.listParam2.material_id = result.material_id;
            this.listParam2.pid = result.list_1_id;
            this.getList2();
          }
        }

        this.otherInfo.user_name = result.user_name;
        this.otherInfo.score = result.scores;
        this.otherInfo.favorite_num = result.favs;
        this.otherInfo.comment_num = result.comments;
        this.otherInfo.play_num = result.clicks;
        this.otherInfo.upload_time = result.create_time;

        this.saveUploading.status = false;
        this.saveUploading.full = false;
      };
      let fail = (data) => {
        this.saveUploading.status = false;
        this.saveUploading.full = false;
        this.$message.error(data.msg);
      };
      //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
      this.$ajax.get("api/video/video", {
        params: { videoid: this.compParam.id },
        func: { success: success, fail: fail },
      });
    },
    getTeacher() {
        let success = (data) => {
          this.teacherData = data.data;
          let flag = true;

          // 避免老师删除后，显示教师id的情况
          this.teacherData.forEach((item) => {
            if (item.id == this.ruleForm.create_id) {
              flag = false;
            }
          });

          if (flag) {
            this.ruleForm.create_id = null;
          }

          this.$nextTick(() => {
            this.$refs.ruleForm &&
              this.$refs.ruleForm.clearValidate("create_id");
          });
        };
        this.$ajax.get("api/user/user", {
          params: this.teacherParam,
          func: { success: success },
        })
    },
    //表单验证
    submitForm(formName) {
      
      if(this.cNode.length == 0 && this.selectRole.length == 0 && this.selectUser.length == 0) {
        this.ruleForm.limit_type = 1
      }else{
        this.ruleForm.limit_type = this.limitType
        if(this.limitType == 1) {
          this.ruleForm.limit_org_id = ''
          this.ruleForm.limit_role_id = ''
          this.ruleForm.limit_user_id = ''
        }else{
          this.ruleForm.limit_org_id = this.cNode.map(i => i.id).join(',')
          this.ruleForm.limit_role_id = this.selectRole.map(i => i.id).join(',')
          this.ruleForm.limit_user_id = this.selectUser.map(i => i.id).join(',')
        }
      }

      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.pauseVal === 0) {
            this.ruleForm.stop_time = 0
          }
          if (this.creditVal > 0) {
            this.ruleForm.study_score = this.creditVal;
          }
          if (this.uploaderStatus == "noFile") {
            this.$message.error("请选择视频");
            return false;
          } else if (this.uploaderStatus == "fail") {
            this.$message.error("视频上传失败");
            return false;
          } else if (this.uploaderStatus == "loading") {
            this.$message.warning("视频正在上传中");
            return false;
          }

          this.saveVideo();
        } else {
          return false;
        }
      });
    },
    saveVideo() {
      this.saveUploading.status = true;
      this.saveUploading.full = true;

      let success = (data) => {
        this.saveUploading.status = false;
        this.saveUploading.full = false;
        this.$message.success(data.msg);
        setTimeout(() => {
          this.$router.push("/resources/video/video-list");
        }, 1500);
      };
      let fail = (data) => {
        this.$message.error(data.msg);
        this.saveUploading.status = false;
        this.saveUploading.full = false;
      };
      if (this.compParam.editStatus) {
        this.ruleForm.id = this.compParam.id;
        this.$ajax.put("api/video/video", this.ruleForm, {
          func: { success: success, fail: fail },
        });
      } else {
        this.$ajax.post("api/video/video", this.ruleForm, {
          func: { success: success, fail: fail },
        });
      }
    },
    //获取学段
    getOrgLevel2() {
      let success = (data) => {
        this.orgLevel2 = data.data;
      };
      if (this.$store.state.checkLevel) {
        this.orgLevel2Param.app_code = this.app_code;
        this.$ajax.get("api/network/get_platform_org", {
          params: this.orgLevel2Param,
          func: { success: success },
        });
      } else {
        this.$ajax.get("api/org/org", {
          params: this.orgLevel2Param,
          func: { success: success },
        });
      }
    },
    //获取年级
    getOrgLevel3() {
      let success = (data) => {
        this.orgLevel3 = data.data;
      };
      this.$ajax.get("api/org/org", {
        params: this.orgLevel3Param,
        func: { success: success },
      });
    },
    //获取科目
    getSubject() {
      let success = (data) => {
        this.orgSubject = data.data;
      };
      this.$ajax.get("api/cate/subject", {
        params: this.subjectParam,
        func: { success: success },
      });
    },
    //获取版本
    getVersion() {
      let success = (data) => {
        this.orgVersion = data.data;
      };
      this.$ajax.get("api/cate/version", {
        params: this.versionParam,
        func: { success: success },
      });
    },
    //获取教材
    getMaterial() {
      let success = (data) => {
        this.orgMaterial = data.data;
      };
      this.$ajax.get("api/cate/material", {
        params: this.materialParam,
        func: { success: success },
      });
    },
    //获取章
    getList1() {
      let success = (data) => {
        this.orgList1 = data.data;
      };
      this.$ajax.get("api/cate/cate_list", {
        params: this.listParam1,
        func: { success: success },
      });
    },
    //获取节
    getList2() {
      let success = (data) => {
        this.orgList2 = data.data;
      };
      this.$ajax.get("api/cate/cate_list", {
        params: this.listParam2,
        func: { success: success },
      });
    },
    getVideoUpLimit() {
      let success = (data) => {
        this.uploadLimitMax = parseFloat(
          data.data.upload_setting.manage_max_size
        );
      };
      this.$ajax.get("api/video/video_setting", {
        params: this.listParam2,
        func: { success: success },
      });
    },
    handleClose(tag) {
      this.ruleForm.keyword.splice(this.ruleForm.keyword.indexOf(tag), 1);
    },
    showInput() {
      if (this.ruleForm.keyword.length >= 5) {
        this.$message.error("关键词最多设置5个");
        return;
      }
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (checkSpace(inputValue)) {
        this.ruleForm.keyword.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
      //.info(this.dynamicTags)
    },
    cancel() {
      this.$router.go(-1);
    },
    fileFailVideo(rootFile, file, message, chunk) {
      this.uploaderStatus = "fail";
      var mess = eval("(" + message + ")");
      if (parseInt(mess.error) === 401 && this.uploadRetryTimes > 0) {
        let callbcak = (data) => {
          this.uploadRetryTimes--;
          UploaderVideo.retry(file);
        };
        this.get_access_token(callbcak);
      } else {
        this.$message.error(mess.data.msg);
        setTimeout(() => {
          this.isActive = false;
          this.$refs.uploaderVideo.uploader.cancel();
        }, 1500);
      }
    },
    //过滤文件格式
    fileSubmitVideo(files, fileList, event) {
      this.uploaderStatus = "loading";
      for (let i = 0; i < fileList.length; i++) {
        let flag = true;
        let ext = fileList[i].name.split(".").pop().toLocaleLowerCase();
        let name_arr = [
          "flv",
          "ts",
          "wmv",
          "mpeg",
          "mpg",
          "avi",
          "mov",
          "ram",
          "mp4",
          "mkv",
        ];
        if (name_arr.includes(ext)) {
          flag = false;
        }
        if (flag) {
          this.$message.warning(
            "只支持上传 flv/ts/wmv/mpeg/mpg/avi/mov/ram/mp4/mkv 格式视频"
          );
          this.$refs.uploaderVideo.uploader.removeFile(fileList[i]);
          return false;
        } else {
          if (this.$refs.uploaderVideo.uploader.fileList.length > 1) {
            //删除第一张图片
            this.$refs.uploaderVideo.uploader.removeFile(
              this.$refs.uploaderVideo.uploader.fileList[0]
            );
          }
          this.uploadInfo.file_size = fileList[i].size;
          this.selectFileOrNotVideo = true;
          this.selectFileShowVideo = false;
        }

        if (
          fileList[i].size > this.uploadLimitMax * 1024 * 1024 &&
          this.uploadLimitMax > 0
        ) {
          this.$message.warning(
            "只允许上传" + this.uploadLimitMax + "M以内的文件"
          );
          this.$refs.uploaderVideo.uploader.removeFile(fileList[i]);

          return false;
        }

        let file_name = fileList[i].name.split(".");
        file_name.pop();

        this.ruleForm.name = file_name.join("").substr(0, 50);
      }
    },
    fileRemovedVideo(file) {
      this.uploaderStatus = "noFile";
      this.selectFileOrNotVideo = false;
      this.selectFileShowVideo = true;
    },
    videoRemove() {
      if (this.diskState) {
        this.$message.error(
          "系统存储容量小于5G，请清理存储空间（视频/资源文件）或升级存储"
        );
        return false;
      }

      UploaderVideo.cancel();
      this.ruleForm.path = "";
      this.selectFileOrNotVideo = false;
      this.selectFileShowVideo = true;
    },
    //上传成功的事件
    fileSuccessVideo(rootFile, file, message, chunk) {
      this.uploaderStatus = "success";
      var mess = eval("(" + message + ")");
      mess = handleResponseData(mess);
      if (parseInt(mess.data.status) === 1) {
        this.ruleForm.path = mess.data.file_path;
        this.ruleForm.thumbnail_picture = mess.data.video_image;
      }
    },
    fileUploadVideo() {
      UploaderVideo.upload();
    },
    pictureRemove() {
      UploaderImg.cancel();
      this.ruleForm.picture = "";
      this.previewImgUrl = "";
      this.selectFileOrNotImg = false;
      this.selectFileShowImg = true;
    },
    //上传成功的事件
    fileSuccessImg(rootFile, file, message, chunk) {
      var mess = eval("(" + message + ")");
      mess = handleResponseData(mess);

      if (parseInt(mess.data.status) === 1) {
        this.ruleForm.picture = mess.data.file_path;
      }
      this.uploadStatus.img = true;
    },
    fileFailImg(rootFile, file, message, chunk) {
      uploaderFileFail(this, UploaderImg, file, message);
    },
    //清空上传控件列表的数据
    clearFilet() {
      this.cropperViews = false;
      this.$refs.uploaderImg.uploader.fileList = [];
      this.$refs.uploaderImg.uploader.files = [];
    },
    //图片裁剪后替换原图片
    finish(type) {
      if (type === "blob") {
        this.$refs.cropper.getCropBlob((data) => {
          this.cropperViews = false;
        });
      } else {
        this.$refs.cropper.getCropData((data) => {
          let result = this.$refs.uploaderImg.uploader.fileList;
          let modelView = dataURLtoFile(
            data,
            this.$refs.uploaderImg.uploader.fileList[0].name,
            "png"
          );

          if (modelView.size > 10240000) {
            this.$message.warning("只允许上传10M以内的文件");
            this.clearFilet();
          } else {
            this.$refs.uploaderImg.uploader.fileList[0].file = modelView;
            this.$refs.uploaderImg.uploader.files[0].file = modelView;
            this.$refs.uploaderImg.uploader.fileList[0].size = modelView.size;
            this.$refs.uploaderImg.uploader.files[0].size = modelView.size;

            this.$refs.uploaderImg.uploader.fileList[0].fileType = "image/png";
            this.$refs.uploaderImg.uploader.files[0].fileType = "image/png";
            this.$refs.uploaderImg.uploader.fileList[0].name =
              this.$refs.uploaderImg.uploader.fileList[0].name
                .split(/(.*)\.[^.]+/)
                .join("") + ".png";
            this.$refs.uploaderImg.uploader.files[0].name =
              this.$refs.uploaderImg.uploader.fileList[0].name
                .split(/(.*)\.[^.]+/)
                .join("") + ".png";
            this.$refs.uploaderImg.uploader.fileList[0].relativePath =
              this.$refs.uploaderImg.uploader.fileList[0].relativePath
                .split(/(.*)\.[^.]+/)
                .join("") + ".png";
            this.$refs.uploaderImg.uploader.files[0].relativePath =
              this.$refs.uploaderImg.uploader.fileList[0].relativePath
                .split(/(.*)\.[^.]+/)
                .join("") + ".png";
            this.$refs.uploaderImg.uploader.fileList[0].uniqueIdentifier =
              modelView.size +
              "-" +
              this.$refs.uploaderImg.uploader.fileList[0].name;
            this.$refs.uploaderImg.uploader.fileList[0].chunks[0].endByte =
              modelView.size;

            this.previewImgURL = data;
            this.cropperViews = false;
            this.selectFileOrNotImg = true;
            this.selectFileShowImg = false;

            this.fileUpload();
          }
        });
      }
    },
    fileUpload() {
      this.$refs.uploaderImg.uploader.upload();
    },
    fileAddImg(file, fileList) {
      let file_type = file.fileType.toLocaleLowerCase();

      if (!this.imageType.includes(file_type)) {
        this.$message.warning("支持 JPG/PNG/JPEG 等格式");
      } else {
        this.imgOption.img = window.URL.createObjectURL(file.file);
        this.cropperViews = true;
      }
    },
    //过滤文件格式
    fileSubmitImg(files, fileList, event) {
      for (var i = 0; i < fileList.length; i++) {
        var file_type = fileList[i].fileType.toLocaleLowerCase();

        if (!this.imageType.includes(file_type)) {
          this.$message.warning("只允许上传 bmp/jpg/jpeg/png 格式图片");
          this.$refs.uploaderImg.uploader.removeFile(fileList[i]);
        } else if (fileList[i].size > 10240000) {
          this.$message.warning("只允许上传10M以内的文件");
          this.$refs.uploaderImg.uploader.removeFile(fileList[i]);
        } else {
          if (this.$refs.uploaderImg.uploader.fileList.length > 1) {
            //删除第一张图片
            this.$refs.uploaderImg.uploader.removeFile(
              this.$refs.uploaderImg.uploader.fileList[0]
            );
          }
          this.previewImgUrl = window.URL.createObjectURL(fileList[i].file);
          this.uploadInfo.file_size = fileList[i].size;
          this.selectFileOrNotImg = true;
          this.selectFileShowImg = false;
        }
      }
    },
    fileRemovedImg(file) {
      this.previewImgUrl = "";
      this.selectFileOrNotImg = false;
      this.selectFileShowImg = true;
    },
    fileUploadImg() {
      UploaderImg.upload();
    },
    relateChange(newVal, type) {
      switch (type) {
        case "study_section":
          this.ruleForm.grade_id = null;
          this.ruleForm.subject_id = null;
          this.ruleForm.version_id = null;
          this.ruleForm.material_id = null;
          this.ruleForm.list_1_id = null;
          this.ruleForm.list_2_id = null;

          this.orgLevel3 = [];
          this.orgSubject = [];
          this.orgVersion = [];
          this.orgMaterial = [];
          this.orgList1 = [];
          this.orgList2 = [];

          this.orgLevel3Param.pid = newVal;
          this.getOrgLevel3();
          break;
        case "grade":
          this.ruleForm.subject_id = null;
          this.ruleForm.version_id = null;
          this.ruleForm.material_id = null;
          this.ruleForm.list_1_id = null;
          this.ruleForm.list_2_id = null;

          this.orgSubject = [];
          this.orgVersion = [];
          this.orgMaterial = [];
          this.orgList1 = [];
          this.orgList2 = [];

          this.subjectParam.org_id = newVal;
          this.getSubject();

          this.versionParam.org_id = newVal;

          this.materialParam.org_id = newVal;
          break;
        case "subject":
          this.ruleForm.version_id = null;
          this.ruleForm.material_id = null;
          this.ruleForm.list_1_id = null;
          this.ruleForm.list_2_id = null;

          this.orgVersion = [];
          this.orgMaterial = [];
          this.orgList1 = [];
          this.orgList2 = [];

          this.versionParam.sub_id = newVal;
          this.getVersion();

          this.materialParam.sub_id = newVal;
          break;
        case "version":
          this.ruleForm.material_id = null;
          this.ruleForm.list_1_id = null;
          this.ruleForm.list_2_id = null;

          this.orgMaterial = [];
          this.orgList1 = [];
          this.orgList2 = [];

          this.materialParam.ver_id = newVal;
          this.getMaterial();
          break;
        case "material":
          this.ruleForm.list_1_id = null;
          this.ruleForm.list_2_id = null;

          this.orgList1 = [];
          this.orgList2 = [];

          this.listParam1.material_id = newVal;
          this.listParam2.material_id = newVal;
          this.getList1();
          break;
        case "list_1":
          this.ruleForm.list_2_id = null;

          this.orgList2 = [];

          this.listParam2.pid = newVal;
          this.getList2();
          break;
        default:
          break;
      }
    },
  },
  mounted() {
    // 获取uploader对象
    this.$nextTick(() => {
      window.UploaderVideo = this.$refs.uploaderVideo.uploader;
      window.UploaderImg = this.$refs.uploaderImg.uploader;
    });
  },
};
</script>
<style lang="scss">
.videoMsg {
  .contentBox { // 权限盒子
    height: 400px;
    width: 100%;
    display: flex;
    padding: 10px 0;
    .leftBox {
      height: 100%;
      width: 48.5%;
      margin-right: 1.5%;
      h4 {
        margin: 15px 0 5px 0;
      }
      .el-tab-pane {
        padding-left: 10px;
      }
      .el-tabs__header{
				margin: 0 0 10px 0;
			}
			.el-tabs__item.is-active{
				background: none;
        color: #409EFF;
			}
			.el-tabs__nav-wrap{
				width: 100%;
			}
      // .el-checkbox__input {
      // }
      // .el-checkbox__label {
      // }
    }
    .rightBox {
      height: 100%;
      width: 49%;
      h4 {
        padding-left: 20px;
        margin: 15px 0 5px 0;
      }
      .tagBox {
        height: 90%;
        overflow: auto;
        border: 1px solid #EBEEF5;
        .el-tag {
          margin: 5px 0 0 5px;
        }
      }
    }
  }
  .allDataBox {
    padding-top: 5px;
    .chaiBox {
      line-height: 28px;
      width: 100%;
      height: 100px;
      overflow: auto;
      border: 1px solid #dddddd;
      .el-tag {
        margin-left: 4px;
      }
    }
  }
  .croppering {
    .cropper {
      height: 500px;

      > div {
        height: 100%;
      }
    }

    .dialog-footer {
      padding: 35px 0;
      text-align: center;

      button {
        padding: 10px 30px;
      }
    }

    .vue-cropper {
      position: relative;
      width: 100%;
      height: 500px;
      box-sizing: border-box;
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      direction: ltr;
      touch-action: none;
      text-align: left;
      background-image: url("");
    }

    .cropper-box,
    .cropper-box-canvas,
    .cropper-drag-box,
    .cropper-crop-box,
    .cropper-face {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      user-select: none;
    }

    .cropper-box-canvas img {
      position: relative;
      text-align: left;
      user-select: none;
      transform: none;
      max-width: none;
      max-height: none;
    }

    .cropper-box {
      overflow: hidden;
    }

    .cropper-move {
      cursor: move;
    }

    .cropper-crop {
      cursor: crosshair;
    }

    .cropper-modal {
      background: rgba(0, 0, 0, 0.5);
    }

    .cropper-view-box {
      display: block;
      overflow: hidden;
      width: 100%;
      height: 100%;
      outline: 1px solid #39f;
      outline-color: rgba(51, 153, 255, 0.75);
      user-select: none;
    }

    .cropper-view-box img {
      user-select: none;
      text-align: left;
      max-width: none;
      max-height: none;
    }

    .cropper-face {
      top: 0;
      left: 0;
      background-color: #fff;
      opacity: 0.1;
    }

    .crop-info {
      position: absolute;
      left: 0px;
      min-width: 65px;
      text-align: center;
      color: white;
      line-height: 20px;
      background-color: rgba(0, 0, 0, 0.8);
      font-size: 12px;
    }

    .crop-line {
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      opacity: 0.1;
    }

    .line-w {
      top: -3px;
      left: 0;
      height: 5px;
      cursor: n-resize;
    }

    .line-a {
      top: 0;
      left: -3px;
      width: 5px;
      cursor: w-resize;
    }

    .line-s {
      bottom: -3px;
      left: 0;
      height: 5px;
      cursor: s-resize;
    }

    .line-d {
      top: 0;
      right: -3px;
      width: 5px;
      cursor: e-resize;
    }

    .crop-point {
      position: absolute;
      width: 8px;
      height: 8px;
      opacity: 0.75;
      background-color: #39f;
      border-radius: 100%;
    }

    .point1 {
      top: -4px;
      left: -4px;
      cursor: nw-resize;
    }

    .point2 {
      top: -5px;
      left: 50%;
      margin-left: -3px;
      cursor: n-resize;
    }

    .point3 {
      top: -4px;
      right: -4px;
      cursor: ne-resize;
    }

    .point4 {
      top: 50%;
      left: -4px;
      margin-top: -3px;
      cursor: w-resize;
    }

    .point5 {
      top: 50%;
      right: -4px;
      margin-top: -3px;
      cursor: e-resize;
    }

    .point6 {
      bottom: -5px;
      left: -4px;
      cursor: sw-resize;
    }

    .point7 {
      bottom: -5px;
      left: 50%;
      margin-left: -3px;
      cursor: s-resize;
    }

    .point8 {
      bottom: -5px;
      right: -4px;
      cursor: se-resize;
    }
  }

  .thumbnail-picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  .publishFrom_seleck {
    text-align: center;
    text-align-last: justify;
    > .el-form-item {
      text-align: left;
      text-align-last: initial;
      display: inline-block;
      vertical-align: top;
    }
  }

  .numberWord {
    position: absolute;
    bottom: 5px;
    right: 15px;
    color: #666;
    line-height: 19px;
    font-size: 12px;
    > i {
      color: #000;
      font-style: normal;
    }
  }

  .information {
    background: #eff6ff;
    padding: 25px 45px 20px;
    margin-bottom: 40px;
  }

  .information_l {
    > span {
      text-align: center;
      display: inline-block;
      vertical-align: top;
      margin-right: 60px;
      > p {
        color: #888;
        line-height: 16px;
        margin-top: 10px;
      }
      &:last-of-type {
        margin-right: 0;
      }
    }
  }

  .information_r {
    > p {
      font-size: 12px;
      color: #666666;
      text-align: right;
      > strong {
        font-size: 36px;
        color: #e1733a;
        line-height: 46px;
      }
      &:first-of-type {
        margin-bottom: 30px;
      }
    }
  }

  .keyword {
    max-width: 220px !important;
  }

  .keywordBox {
    .el-tag {
      margin-right: 10px;
      border: 0;
      background-color: rgb(239, 246, 255);
      border-radius: 0;
    }
  }

  .uploader-box .uploader-inner .uploader-example .uploader-btn i {
    margin-top: 0 !important;
  }

  .uploader-box .uploader-inner .uploader-video .uploader-btn i {
    margin-top: 20px !important;
  }

  .uploaderList {
    position: fixed !important;
    width: 100%;
    height: 100%;
    top: 0 !important;
    left: 0;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 9;
    opacity: 1;
    ul {
      position: relative;
      top: 300px;
      bottom: 0;
      left: 0;
      right: 0;
      width: 50%;
      margin: auto !important;
      background: #eee;
      > li {
        position: relative;
      }
    }
  }
  .uploader-box {
    .uploader-inner {
      display: inline-block;

      .video-format-ifno {
        position: relative;

        span {
          position: absolute;
          left: 50%;
          bottom: 24px;
          width: 100%;
          transform: translateX(-50%);
        }
      }

      .format-ifno {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

      .uploader {
        width: 280px;
        height: 160px;
        border: 1px solid #ddd;
        border-radius: 4px;
        overflow: hidden;
        .uploader-btn {
          border: none;
          width: 100%;
          height: 100%;
          padding: 0;
          text-align: center;
          i {
            font-size: 80px;
            color: #9cd1ff;
            margin-top: 45px;
          }
          img {
            width: 100%;
            height: 100%;
          }
        }

        .uploader-close-box {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          // background: rgba(0, 0, 0, .3);
          background: #fff;
          z-index: 99;

          > img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }

          .el-upload-list__item-status-label {
            display: block;
            position: absolute;
            right: -17px;
            top: -7px;
            width: 46px;
            height: 26px;
            background: #13ce66;
            text-align: center;
            transform: rotate(45deg);
            box-shadow: 0 1px 1px #ccc;

            .el-icon-check {
              font-size: 12px;
              margin-top: 12px;
              color: #fff;
              transform: rotate(-45deg);
              font-family: "element-icons" !important;
              speak: none;
              font-style: normal;
              font-weight: normal;
              font-variant: normal;
              text-transform: none;
              line-height: 1;
              vertical-align: baseline;
              display: inline-block;
              -webkit-font-smoothing: antialiased;
            }

            .el-icon-check:before {
              content: "\E6DA";
            }

            .el-icon-close {
              display: none;
            }
          }
        }

        .uploader-close-box:hover {
          .el-upload-list__item-status-label {
            top: -4px;
            right: -15px;
            background: #f56c6c;
            box-shadow: none;
            cursor: pointer;

            .el-icon-check {
              display: none;
            }

            .el-icon-close {
              position: absolute;
              transform: rotate(-45deg);
              top: 10px;
              color: #fff;
              right: 14px;
              font-family: "element-icons" !important;
              speak: none;
              font-style: normal;
              font-weight: normal;
              font-variant: normal;
              text-transform: none;
              line-height: 1;
              vertical-align: baseline;
              display: inline-block;
              -webkit-font-smoothing: antialiased;
            }

            .el-icon-close:before {
              content: "\E6DB";
            }
          }
        }

        .uploader-list {
          position: relative;
          height: 100%;
          background: rgba(0, 0, 0, 0.4);
          .uploader-file {
            position: relative;
            width: 76%;
            height: 100%;
            margin: 0 auto;
            border-bottom: none;
            overflow: hidden;
          }
          .uploader-file-progress {
            height: 10px;
            top: 58px;
            background: #3ce642;
          }
          .uploader-file-info {
            height: 49px;
            line-height: 49px;
            margin-top: 60px;
            font-size: 12px;
            color: #fff;
            z-index: 1;
          }

          .uploader-file-info:hover {
            background-color: transparent;
          }

          .uploader-file-name,
          .uploader-file-meta {
            display: none;
          }
          .uploader-file-size {
            width: 40%;
            text-indent: 0;
          }
          .uploader-file-status {
            width: 48%;
            text-indent: 0;

            > span:last-child {
              > i {
                display: none;
              }
            }
          }
          .uploader-file-actions {
            .uploader-file-remove {
              position: absolute;
              width: 24px;
              height: 24px;
              line-height: 24px;
              border-radius: 50%;
              color: #fff;
              text-align: center;
              margin: 0;
              background: #ef5c5c;
              top: 50%;
              transform: translateY(-50%);
              &::before {
                display: inline-block;
                content: "x";
              }
            }
          }
        }
      }
    }
    .video-uploader {
      .uploaderList {
        z-index: 10;
      }
    }
  }
}
</style>
